<template>
  <div class="service-page page">
    <nav-bar title="党建服务" theme="red" search message></nav-bar>
    <van-swipe :autoplay="3000" class="service-swipe" v-if="bannerList.length !== 0">
      <van-swipe-item
        v-for="(item, index) in bannerList"
        :key="index"
        @click="$router.push('/notice/detail?noticeCode=' + item.noticeCode)"
      >
        <img :src="$config.ImageURl + item.bannerImg" />
      </van-swipe-item>
    </van-swipe>
    <div class="service-image" v-if="flag">
      <img src="~@/assets/images/notice/banner.png" />
    </div>
    <div class="service-menus">
      <van-row>
        <van-col span="6" @click="routerClick(item)" v-for="(item, key) in serviceMenus" align="center" :key="key">
          <div class="service-entry-item">
            <img :src="item.iconPath" alt="" />
            <p>{{ item.text }}</p>
          </div>
        </van-col>
      </van-row>
    </div>
    <van-sticky class="page-scroll" :offset-top="44">
      <template v-if="listData.length">
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check="false"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          finished-text="没有更多了~"
          @load="getList"
        >
          <div
            class="service-list"
            v-for="(item, index) in listData"
            :key="index"
            @click="$router.push('/partyBuilding/Study/detail?code=' + item.code + '&learnType=1')"
          >
            <img :src="$config.ImageURl + item.imageUrl" v-if="item.imageUrl" />
            <img src="~@/assets/images/notice/bannerLeft.png" v-if="!item.imageUrl" />
            <div class="service-list-textRight">
              <p class="service-list-textRight-title">{{ item.title }}</p>
              <div>
                <span class="lefts">{{ item.typeName }}</span>
                <span class="rights">{{ item.publishTime }}</span>
              </div>
            </div>
          </div>
        </van-list>
      </template>
      <template v-else>
        <van-empty
          :image="require('@/assets/images/basic/pic_no_content.png')"
          description="暂无内容~"
          style="height: 300px"
        />
      </template>
    </van-sticky>
  </div>
</template>
<script>
import partyBuilding from '@/api/partyBuilding'
import List from '@/mixins/list'
export default {
  mixins: [List],
  data() {
    return {
      api: partyBuilding.Study,
      searchForm: {
        learnType: '1',
        childLearnType: '',
        pageNumber: 1,
        recordSize: 0,
        pageSize: 10
      },
      bannerList: [],
      flag: false,
      serviceMenus: [
        {
          text: '党建公告',
          iconPath: require('@/assets/images/partyBuilding/service_notice@2x.png'),
          path: '/notice/list'
        },
        {
          text: '党建活动',
          iconPath: require('@/assets/images/partyBuilding/service_act@2x.png'),
          path: '/partyBuilding/Activity'
        },
        {
          text: '学习园地',
          iconPath: require('@/assets/images/partyBuilding/service_study@2x.png'),
          path: '/partyBuilding/Study'
        },
        {
          text: '我的信息',
          iconPath: require('@/assets/images/partyBuilding/service_my@2x.png'),
          path: '/partyBuilding/My'
        }
      ]
    }
  },
  created() {
    this.getBanner()
    this.getList()
  },
  methods: {
    routerClick(val) {
      this.$router.push({ path: val.path })
    },
    getBanner() {
      partyBuilding.Notice.bannerlist().then(res => {
        if (res.data.status === 0 && res.data.data) {
          this.bannerList = res.data.data
        } else {
          this.flag = true
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/partyBuilding/index.less';
</style>
